<template>
  <van-nav-bar title="个人中心" :fixed="true"/>
  <div class="contain">
    <div class="userInfo">
      <div class="avatar">
        <van-image
          round
          width="50px"
          height="50px"
          :src="userData.userInfo.avatar_url"
          />
        <input type="file" @change="uploadAvatar" accept="image/*">
      </div>
      <div class="info">
        <p>昵&nbsp;&nbsp;&nbsp;称：{{userData.userInfo.name}}</p>
        <p>登录名：{{userData.userInfo.email}}</p>
      </div>
    </div>
    <div class="list">
      <p @click.stop="router.push('/orders')"><span>我的订单</span><van-icon name="arrow" /></p>
      <p @click.stop="router.push('/collect')"><span>我的收藏</span><van-icon name="arrow" /></p>
      <p @click.stop="router.push('/address')"><span>地址管理</span><van-icon name="arrow" /></p>
      <p @click.stop="router.push('/about')"><span>关于我们</span><van-icon name="arrow" /></p>
      <van-button
        size="large"
        round
        color="#1989fa"
        @click="handleLoginOut"
      >退出登录</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getUserInfo,changeAvatat } from '@/api/my'
import { loginOut } from '@/api/login'
import { IUserData } from '@/types/my'
import { Toast } from 'vant'
import { onMounted, reactive, ref } from 'vue';
import router from '@/router';

  let userData = reactive({
    userInfo:{
      avatar_url:'',
      name:'',
      email:''
    } as IUserData 
  })
  const getUserData = (async () => {
    let res = await getUserInfo()
    if(res.status === 200){
      userData.userInfo = res.data
    }
  })
  // 更换头像
  const uploadAvatar = async (e:any) => {
    let files = e.target.files
    let formData = new FormData()
    formData.append("avatar",files[0])
    let res = await changeAvatat(formData)
    if(res.status === 200){
      Toast.success("上传成功")
      getUserData()
    }else{
      Toast.fail("文件格式错误")
    }
  }
  // 退出登录
  const handleLoginOut = async () => {
    let res = await loginOut()
    if(res.status === 204){
      Toast.success("退出成功")
      localStorage.removeItem("bookshop-token")
      router.push('/login')
    }else{
      Toast.fail("退出失败?")
    }
  }
  // 跳转
  const goToWhere = (where:string) => {
    router.push(where)
  }
  onMounted(() => {
    getUserData()
  })
</script>

<style scoped lang="less">
.contain {
  .userInfo {
    border-radius: 5px;
    margin: 66px 10px 20px;
    background: linear-gradient(90deg,#f2f3f5,#646566);
    display: flex;
    .avatar {
      width: 50px;
      height: 50px;
      position: relative;
      margin: 20px;
      /deep/ .van-image {
        position: absolute;
        z-index: 0;
      }
      input {
        width: 50px;
        height: 50px;
        position: absolute;
        z-index: 1;
        opacity: 0;
      }
    }
    .info {
      margin-top: 20px;
      p {
        color: #000;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }
  .list {
    margin: 0 10px;
    font-size: 18px;
    p {
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 50px;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    .van-button {
      margin-top: 30px;
    }
  }
}
</style>